<!-- 专家智库 -->
<template>
	<div class="box">
		<titleBox :title="'专家智库'"></titleBox>
		<div class="thinkTank_box" v-if="dataList.thinkTank.length">
			<thinkTank v-for="(think,i) in dataList.thinkTank" :list="think" @click="open(think)"></thinkTank>
		</div>
		<div class="errorIcon" v-if="!dataList.thinkTank.length" style="margin-top: 30px;">
			<img src="../../assets/error.png" alt="">
			<p>暂无数据</p>
		</div>
		<div class="paging">
			<el-pagination 
			:pager-count="5"
				background 
				layout="prev, pager, next" 
				:total="dataList.total" 
				:current-page="dataList.page"
				@current-change="changesize" />
		</div>
		<el-dialog v-model="dataList.show" :show-close="false" width="408px" :close-on-click-modal="false">
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
					<h4>专家详情</h4>
					<img src="../../assets/apply/close.png" alt="" @click="tiwen">
				</div>
			</template>
			<div class="my_content">
				<div>
					<img :src="dataList.msgList.avatar" alt="">
					<p>{{dataList.msgList.specialistName}}</p>
				</div>
				<p class="my_content_msg">{{dataList.msgList.introduce}}</p>
				<p class="my_content_qq">{{dataList.msgList.email?dataList.msgList.email:'暂无邮箱'}}</p>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import {searchSpecialistInfo} from "../../api/home.js";
	import thinkTank from '../../components/thinkTank.vue';
	import titleBox from '../../components/titleBox.vue';
	import {reactive,onBeforeMount} from 'vue';
	const dataList = reactive({
		total:10,   
		page:1,
		tabId:1,
		thinkTank:[],
		show:false,
		msgList:''
	})
	onBeforeMount(()=> {
		getsearchSpecialistInfo()
	})
	const select = (id)=> {
		dataList.tabId = id
	}
	const changesize = (value)=> {
		dataList.page = value
	}
	const tiwen = () => {
		// return
		dataList.show = !dataList.show
	}
	const open = (list) => {
		dataList.msgList = list
		console.log(dataList.msgList.avatar)
		dataList.show = !dataList.show
	}
	const getsearchSpecialistInfo = () => {
		var data = {
			page: {pageNum: 1,pageSize: 100},
			params: {specialistName: ""},
		}
		searchSpecialistInfo(data).then(res=> {
			dataList.thinkTank = res.data.list
		})
	}
</script>

<style scoped lang="scss">
	.box{
		width: 1200px;
		margin: 30px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-top: 30px;
		.thinkTank_box{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.tab{
			display: flex;
			justify-content: space-between;
			margin-top: 30px;
			&_item{
				padding: 6px 20px;
				background: #F4F4F4;
				border-radius: 5px;
			}
			.active{
				background: #11918E;
				color: #FFFFFF;
			}
		}
	}
	/* 分页 */
	.paging{
			width: 100%;
			margin-top: 30px;
			display: flex;
			justify-content: center;
			:deep(.is-active) {
				background-color: #11918E !important;
			}
		}
	// 弹窗
	.my-header {
		position: relative;
		display: flex;
		justify-content: center;
	
		h4 {
			font-size: 26px;
			font-weight: 600;
			color: #11918E;
		}
	
		img {
			position: absolute;
			right: 0;
			top: 5px;
			width: 35px;
			height: 35px;
		}
	}
	.my_content{
		&_msg{
			width: 348px;
			font-size: 16px;
			color: #333333;
			margin-top: 15px;
		}
		&_qq{
			width: 155px;
			font-size: 16px;
			font-weight: 400;
			color: #333333;
			margin-top: 15px;
		}
		div{
			display: flex;
			align-items: center;
			img{
				width: 84px;
				height: 84px;
				border-radius: 50%;
				margin-right: 15px;
			}
			p{
				font-size: 20px;
				font-weight: 600;
				color: #333333;
			}
		}
	}
</style>